<script>
import { computed, defineComponent, reactive, ref } from 'vue'
import {
  CloseOutlined,
  CheckOutlined,
  EditOutlined,
} from '@ant-design/icons-vue'
import * as Antd from 'ant-design-vue'
import { allSpace } from '@Untils'
export default defineComponent({
  components: {
    CloseOutlined,
    CheckOutlined,
    EditOutlined,
  },
  emits: ['result'],
  props: {
    value: {
      type: Array(String, Number),
      default: () => {
        return null
      },
    },
    rule: {
      type: Array,
      default: () => {
        return [
          {
            required: true,
            message: '请输入名称',
          },
          {
            max: 10,
            message: '名称长度不能超过10个字符',
          },
          {
            validator: allSpace,
            message: '请正确输入名称',
          },
        ]
      },
    },
  },
  setup(props, context) {
    let status = ref(1) //1正常模式 2编辑模式
    let loading = ref(false)
    let value = computed(() => {
      return props.value
    })

    let edit_value = ref(value.value)
    let submitHandler = () => {
      useform.validate().then(() => {
        loading.value = true
        context.emit('result', {
          params: edit_value.value,
          innerCallBack: (_result) => {
            loading.value = false
            if (_result.code == 0) {
              status.value = 1
            } else {
              status.value = 2
            }
          },
        })
      })
    }

    let rule = ref({
      name: props.rule,
    })
    let model = reactive({
      name: edit_value,
    })
    let useform = Antd.Form.useForm(model, rule)

    return { value, status, edit_value, submitHandler, loading, useform }
  },
  render() {
    return (
      <>
        {this.status == 1 && (
          <Antd.Space>
            <span>{this.value}</span>
            <EditOutlined
              onClick={() => {
                this.status = 2
              }}
            />
          </Antd.Space>
        )}

        {this.status == 2 && (
          <Antd.Space>
            <Antd.Form>
              <Antd.FormItem {...this.useform.validateInfos.name}>
                <Antd.Input
                  value={this.edit_value}
                  onChange={(e) => {
                    this.edit_value = e.target.value
                  }}
                  suffix={() => {
                    return (
                      <Antd.Space>
                        <Antd.Button
                          loading={this.loading}
                          size="small"
                          type="link"
                          onClick={() => {
                            this.submitHandler()
                          }}
                        >
                          <CheckOutlined />
                        </Antd.Button>
                        <Antd.Button
                          loading={this.loading}
                          size="small"
                          type="link"
                          onClick={() => {
                            this.status = 1
                            this.edit_value = this.value
                          }}
                        >
                          <CloseOutlined />
                        </Antd.Button>
                      </Antd.Space>
                    )
                  }}
                />
              </Antd.FormItem>
            </Antd.Form>
          </Antd.Space>
        )}
      </>
    )
  },
})
</script>
<style scoped>
:deep() .ant-form-item-explain-error {
  text-align: left;
  font-weight: normal;
  font-size: 12px;
}
</style>
